<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>React抖音版</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_2034617_h88s7aevhz.css">
  <link rel="stylesheet" href="./assets/style/base.css">
</head>
<body>

<div id="root"></div>
<script src="babel.js"></script>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<!--头部-->
<script type="text/babel">
  class HeaderContainer extends React.Component{
    constructor(props) {
      super(props);
    }
    render(){
      return (
        <div className="headercontainer_box">
            <span className="live__box">
                <button className="maincontainer__box--btn live__btn">直播</button>
            </span>
          <span class="middlespace__box">
                <button className="maincontainer__box--btn fllowed__btn">关注</button>
                <button className="maincontainer__box--btn recommend__btn">推荐</button>
            </span>
          <span class="search__box">
              <button className="maincontainer__box--btn search__btn dy dyicon-test"></button>
            </span>
        </div>
      )
    }
  }
</script>
<!--底部-->
<script type="text/babel">
  class FooterContainer extends React.Component{
    constructor(props) {
      super(props);
    }
    render(){
      return (
        <div className="footercontainer__box">
          <div class="footercontainer__navbox">
                  <span className="home__box">
                      <button className="maincontainer__box--btn footercontainer__navbox--btn home__btn">首页</button>
                  </span>
            <span className="samecity__box">
                      <button className="maincontainer__box--btn footercontainer__navbox--btn samecity__btn">同城</button>
                  </span>
            <span className="creat__box">
                      <button className="maincontainer__box--btn footercontainer__navbox--btn creat__btn">+</button>
                  </span>
            <span className="message__box">
                      <button className="maincontainer__box--btn footercontainer__navbox--btn message__btn">消息</button>
                  </span>
            <span className="me__box">
                      <button className="maincontainer__box--btn footercontainer__navbox--btn me__btn">我</button>
                  </span>
          </div>
        </div>
      )
    }
  }
</script>
<!--右侧-->
<script type="text/babel">
  class SideContainer extends React.Component{
    constructor(props){
      super(props);
      this.state = {
        commentList:[]
      }
    }

    render(){
      return (
        <div className="sidecontainer__box">
          <div class="videouser__box">
            <a href="" class="videouser__thumb">
              <img src="./assets/images/timg.jfif" />
            </a>
            <i className="dy dyjiahao fllow__btn-icon"></i>
          </div>
          <ThumbsUp></ThumbsUp>
          <div className="pl__box">
            <a href="javascript:;" className="pl__btn dy dywodepinglun">{this.state.commentList.length}</a>
          </div>
          <div className="fx__box">
            <a href="" className="fx__btn dy dyshare-fill">分享</a>
          </div>
          <div className="bgminfo__turntablebox">
            <a herf="" className="bgminfo__turntable">
              <img src="./assets/images/zjl.jfif"/>
            </a>
          </div>
        </div>
      )
    }
  }
</script>
<!--点赞组件-->
<script type="text/babel">
  class ThumbsUp extends React.Component{
    constructor(props) {
      super(props);
      this.state = {
        thumbsUp:0,
        isThumbsUped:false
      }
      this.giveTheThumbsUp = this.giveTheThumbsUp.bind(this);
    }
    giveTheThumbsUp(){
      this.setState((state,props)=>{
        let isThumbsUped = state.isThumbsUped;
        return {
          thumbsUp: !isThumbsUped ? this.state.thumbsUp + 1 : this.state.thumbsUp - 1,
          isThumbsUped: !isThumbsUped
        }
      })
    }
    render(){
      return (
        <div className={`dz__box ${this.props.className}`}>
          <a href="javascript:;" onClick={this.giveTheThumbsUp} className={`dz__btn dy dyaixin ${this.state.isThumbsUped ? 'dyaixin__thumbsuped' : ''}`}>{this.state.thumbsUp}</a>
        </div>
      )
    }
  }
</script>
<!--评论-->
<script type="text/babel">
  class VideoCommentContainer extends React.Component{
    constructor(props) {
      super(props);
    }
    render(){
      return (
        <div className="videocommentcontainer__box">
          <div className="videocomment__box">
            <div className="videocomment__headerbox">
              <span className="videocomment__headerbox--commentnum">47条评论</span>
              <i className="dy dyguanbi"></i>
            </div>
            <ul className="videocomment__listbox">
              <VideoCommentItemContainer></VideoCommentItemContainer>
              <VideoCommentItemContainer></VideoCommentItemContainer>
              <VideoCommentItemContainer></VideoCommentItemContainer>
              <VideoCommentItemContainer></VideoCommentItemContainer>
              <VideoCommentItemContainer></VideoCommentItemContainer>
              <VideoCommentItemContainer></VideoCommentItemContainer>
              <VideoCommentItemContainer></VideoCommentItemContainer>
              <VideoCommentItemContainer></VideoCommentItemContainer>
              <VideoCommentItemContainer></VideoCommentItemContainer>
              <VideoCommentItemContainer></VideoCommentItemContainer>
              <VideoCommentItemContainer></VideoCommentItemContainer>
              <VideoCommentItemContainer></VideoCommentItemContainer>
            </ul>
            <div className="videocomment__footerbox">
              <div class="videocomment__commentbox">
                <input class="videocomment__commenttext" disabled placeholder="留下你的精彩评论吧" />
                <button className="atother__btn dy dyyouxiang"></button>
                <button className="emjoy__btn dy dybiaoqing"></button>
              </div>
            </div>

          </div>
        </div>
      );
    }
  }
</script>
<!--评论单项组件-->
<script type="text/babel">
  class VideoCommentItemContainer extends React.Component{
    render(){
      return (
        <li className="videocomment__listbox--item">
          <a className="videocomment__listbox--item__thumb">
            <img
              src="https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2169816155,1077464403&fm=55&app=54&f=JPEG?w=1140&h=640"/>
          </a>
          <div className="videocomment__listbox--item__info">
            <div className="videocomment__listbox--item__username">
              <a>紫罗兰</a>
            </div>
            <p className="videocomment__listbox--item__comment">这个是真的牛逼</p>
            <div class="videocomment__listbox--item__datatimeandrecall">
              <span class="videocomment__listbox--item__datatime">5分钟前</span>
              <span class="videocomment__listbox--item__recall">回复</span>
            </div>
          </div>
          <ThumbsUp className="videocomment__listbox--item__dz"></ThumbsUp>
        </li>
      )
    }
  }
</script>
<!--视频信息-->
<script type="text/babel">
  class VideoInfoContainer extends React.Component{
    constructor(props){
      super(props)
    }
    render(){
      return (
        <div className="videoinfocontainer__box">
          <div className="videoinfo__name-box">
            <a href="" className="videoinfo__name">@松鼠</a>
            <i class="videoinfo__time">· 22小时前</i>
          </div>
          <p class="videoinfo__desc">高低杠很厉害，这是一个专业的体操运动员，我喜欢往上面跳</p>
        </div>
      )
    }
  }
</script>
<!--背景音乐-->
<script type="text/babel">
  class BgmContainer extends React.Component{
    constructor(props){
      super(props)
    }
    render(){
      return (
        <div className="bgncontainer__box">
          <div class="bgminfo__box">
            <i class="bgminfo__icon dy dydouyintexiao"></i>
            <span class="bgminfo__name">@松鼠创作的原声-松鼠</span>
          </div>
        </div>
      )
    }
  }
</script>
<!--视频独立组件-->
<script type="text/babel">
  class VideoItemContainer extends React.Component{
    constructor(props){
      super(props);
      this.state = {
        progress:0
      };
      this.videoProgress = this.videoProgress.bind(this);
    }

    videoProgress(per){
      if(per !== this.state.progress){
        this.setState({
          progress: per
        })
      }
    }
    render(){
      return (
        <div className="videoitemcontainer__box">
          <VideoPlayContainer progress={this.videoProgress}></VideoPlayContainer>
          <SideContainer></SideContainer>
          <VideoBgmInfoContainer progress={this.state.progress}></VideoBgmInfoContainer>
          <VideoCommentContainer></VideoCommentContainer>
        </div>
      )
    }
  }
</script>
<!--视频信息+背景音乐-->
<script type="text/babel">
  class VideoBgmInfoContainer extends React.Component{
    constructor(props){
      super(props)
    }
    render(){
      return (
        <div className="videobgminfocontainer__box">
          <VideoInfoContainer></VideoInfoContainer>
          <BgmContainer></BgmContainer>
          <div className="videoprogress__box">
            <div style={{width:this.props.progress + "%"}} className="videoprogress__linebox">
              <span style={{left: this.props.progress + "%"}} className="videoprogress__pointbox"></span>
            </div>
          </div>
        </div>
      )
    }
  }
</script>
<!--视频显示-->
<script type="text/babel">
  class VideoPlayContainer extends React.Component{
    constructor(props){
      super(props);
      this.state = {
        $video:null,
        playState:true
      };
      this.togglePlay = this.togglePlay.bind(this);
    }
    componentDidMount(){
      this.setState({
        $video:document.getElementById("video")
      })
    }
    togglePlay(){
      this.setState({
        playState:!this.state.playState
      });
    }
    controVideo(playState){
      let $video = this.state.$video;
      let that = this;
      $video.addEventListener("timeupdate",function(e){
        let currentTime = $video.currentTime;
        let duration = $video.duration;
        let per = Math.ceil((currentTime / duration) * 100);
        that.props.progress(per);
      })
      if($video){
        $video[playState ? "play" : "pause"]();
      }
    }
    render(){
      if(this.state.$video){
        this.controVideo(this.state.playState)
      }
      return (
        <div onClick={this.togglePlay} className="videoplaycontainer__box">
          <span class={`dy dyicon_play video__play--icon ${this.state.playState ? "" : "void__play--pause"}`}></span>
          <video id="video" autoplay="autoplay" loop="loop" src="./assets/videos/7016edc23d4c09e90f3fbbd1824aaa4d.mp4"></video>
        </div>
      )
    }
  }
</script>
<!--视频播放主体部分-->
<script type="text/babel">
  class VideoMainContainer extends React.Component{
    constructor(props){
      super(props);
    }
    render(){
      return (
        <div className="videomaincontainer__box">
          <VideoItemContainer></VideoItemContainer>
        </div>
      )
    }
  }
</script>
<!--主体-->
<script type="text/babel">
  //主体
  class MainContainer extends React.Component{
    constructor(props) {
      super(props);
    }
    render(){
      return (
        <div className="maincontainer__box">
          <HeaderContainer></HeaderContainer>
          <VideoMainContainer></VideoMainContainer>
          <FooterContainer></FooterContainer>
        </div>
      )
    }
  }
</script>
<script type="text/babel">
  const $root = document.getElementById("root");
  const e = React.createElement;
  ReactDOM.render(e(MainContainer),$root);
</script>
</body>
</html>